<template>
	<view class="flex-col page">
		<MyHeader>
			<view style="margin-left: 100rpx;">
				<text class="font text_2 text_3">{{querysObj.startingLocation}}</text>
				<image class="title-icon" style="width: 36rpx;" src="../svg/chuxing3.svg" mode="widthFix" />
				<text class="font text_2 text_3">{{querysObj.destination}}</text>
			</view>

		</MyHeader>
		<view class="flex-row justify-between items-center day-control">
			<view class="flex-row items-center" @click="fowardOrBackward(0)">
				<u-icon name="arrow-left"></u-icon>
				<text class="ml-12 font text_2 text_5">前一天</text>
			</view>
			<view class="flex-row items-center group_4">
				<u-calendar @close="calendarShow = false" :show="calendarShow" @confirm="calendarConfirm">
				</u-calendar>
				<view class="flex-row items-center shrink-0" @click="calendarShow = true">
					<text class="font text_4">
						{{dayjs(querysObj.appointmentTime).format('MM月DD日')}}&nbsp;&nbsp;{{weekday}}</text>
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
				<view class="flex-row shrink-0 ml-55" @click="fowardOrBackward(1)">
					<text class="font text_2 text_6 mr-12">后一天</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>


		<view class="flex-col justify-start relative group_5">
			<view class="flex-col list">
				<view class="carList" v-if="cars.length">
					<view class="carItem" v-for="(item, index) in cars" :key="index" @click="onGoCarOrder(item)">
						<view class="timeLeft">
							{{item.appointmentTime.slice(11, 16)||''}}
						</view>
						<view class="middleDestination">
							<view class="startLocation">
								<image class="sameImg" src="@/static/car/分组 7.png" />{{item.startingLocation||'xxx'}}
							</view>
							<view class="destination">
								<image class="sameImg" src="@/static/car/分组 8.png" />{{item.destination||'xxx'}}
							</view>
							<view class="selfInfo">
								<view class="name">
									<image class="sameImg" src="@/static/car/圆形 1.png" />
									<text>{{item.userNickName||'xxx'}}</text>
								</view>
								<ciew class="phone">
									<image class="sameImg" src="@/static/car/分组 6.png" />
									<text>{{item.userPhone||'18888888888'}}</text>
								</ciew>
							</view>
						</view>
						<view class="rightPassager">
							<view class="">
								{{item.currentSeats||'1'}}/4
							</view>
							<view class="">
								<image class="carImg" src="../svg/chuxing8.svg" />
							</view>
						</view>
					</view>
				</view>

				<ListisNull v-else></ListisNull>
			</view>
			<addNewInfo go="/subpkg/taxi/publish/publish" bottom="100"></addNewInfo>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		getTaxiIndexAPI
	} from '../../../apis/taxi';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import dayjs from 'dayjs';
	import {
		getNextDay,
		getPreviousDay,
		getWeekDay
	} from '../../../utils';
	const props = defineProps({
		querys: {
			type: String
		}
	})
	// 目的地 始发地 预约时间
	const querysObj = reactive(JSON.parse(props.querys))
	const getTaxiIndex = async () => {
		const res = await getTaxiIndexAPI(querysObj)
		cars.value = res.data
	}
	console.log(querysObj);
	const cars = ref([])
	const weekday = computed(() => {
		return getWeekDay(querysObj.appointmentTime)
	})
	onShow(() => {
		getTaxiIndex()
	})
	// 控制日历显示隐藏
	const calendarShow = ref(false)
	// 确定预约日期
	const calendarConfirm = (e) => {
		querysObj.appointmentTime = e[0]
		getTaxiIndex()
		calendarShow.value = false
	}
	// 前一天或后一天
	const fowardOrBackward = (type) => {
		if (type) {
			querysObj.appointmentTime = getNextDay(querysObj.appointmentTime)
		} else {
			querysObj.appointmentTime = getPreviousDay(querysObj.appointmentTime)
		}
		getTaxiIndex()
	}
	// 跳转车次订单
	const onGoCarOrder = (item) => {
		uni.navigateTo({
			url: '/subpkg/taxi/orderIndex/orderIndex?id=' + item.id
		})
	}
</script>

<style scoped lang="scss">
	.day-control {
		padding: 20rpx;
		border-bottom: 2rpx solid #ccc;
	}

	.title-icon {
		margin: 0 30rpx;
		vertical-align: middle;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-13 {
		margin-left: 26rpx;
	}

	.ml-55 {
		margin-left: 110rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.mt-179 {
		margin-top: 358rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.mr-12 {
		margin-right: 24rpx;
	}

	.page {
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		background-color: #ffffff;
		height: 268rpx;
		border-bottom: solid 2rpx #f0f0f0;
	}

	.section_2 {
		padding: 34rpx 12rpx 18rpx 28rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 106%);
		border-bottom: solid 2rpx #f0f0f0;
	}

	.group {
		padding-left: 40rpx;
		padding-right: 16rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.section_3 {
		padding: 12rpx 28rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.section_4 {
		margin-left: 60rpx;
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_6 {
		width: 34rpx;
		height: 34rpx;
	}

	.equal-division {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.group_2 {
		width: 464rpx;
	}

	.group_3 {
		position: relative;
		flex: 1 1 232rpx;
	}

	.equal-division-item {
		padding: 16rpx 0 16rpx 48rpx;
	}

	.image_5 {
		width: 36rpx;
		height: 36rpx;
	}

	.pos {
		position: absolute;
		right: -18rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.image_7 {
		width: 38rpx;
		height: 14rpx;
	}

	.pos_2 {
		position: absolute;
		right: -21rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.image_8 {
		width: 10rpx;
		height: 20rpx;
	}

	.group_4 {
		margin-right: 16rpx;
	}

	.image_10 {
		width: 20rpx;
		height: 12rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 26.26rpx;
		color: #333333;
	}

	.text_4 {
		color: #4c8eef;
		line-height: 52rpx;
		text-align: center;
		opacity: 0.9;
		width: 230rpx;
	}

	.text {
		font-size: 30rpx;
		line-height: 22.76rpx;
	}

	.image_9 {
		width: 12rpx;
		height: 22rpx;
	}

	.group_5 {
		padding-top: 22rpx;
	}

	.list {
		margin: 0 24rpx;
		padding-bottom: 20rpx;
	}

	.list-item {
		padding: 36rpx 0 156rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 8rpx #0000001a;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.text-wrapper {
		margin-left: 188rpx;
		padding: 4rpx 0 12rpx;
		background-image: url('https://ide.code.fun/api/image?token=676f93414ae84d001221f681&name=0306af58406abc231676536add58b842.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 20rpx;
		height: 26rpx;
	}

	.font_2 {
		font-size: 12rpx;
		font-family: SourceHanSansCN;
		line-height: 11.12rpx;
		color: #ffffff;
	}

	.pos_3 {
		position: absolute;
		left: 31.4rpx;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.font_4 {
		font-size: 40rpx;
		font-family: SourceHanSansCN;
		line-height: 30.56rpx;
		color: #4c8eef;
	}

	.section_5 {
		background-image: repeating-linear-gradient(90deg, #e5f1ff, #e5f1ff 2.08%, transparent 2.08%, transparent 4.163%);
		background-position: -2rpx 0rpx;
		width: 2rpx;
		height: 194rpx;
	}

	.view {
		margin-left: 24rpx;
	}

	.group_6 {
		margin: 36rpx 40rpx 0 64rpx;
	}

	.group_7 {
		position: absolute;
		right: 0;
		top: 63.5rpx;
	}

	.equal-division_2 {
		padding-left: 62rpx;
		padding-right: 46rpx;
		width: 580rpx;
	}

	.equal-division-item_2 {
		padding-top: 10rpx;
	}

	.text-wrapper_2 {
		margin-left: 4rpx;
		padding: 4rpx 0 12rpx;
		background-image: url('https://ide.code.fun/api/image?token=676f93414ae84d001221f681&name=870f8ac4670b26a6b71084efe91f12a3.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 20rpx;
	}

	.text_9 {
		line-height: 11.04rpx;
	}

	.group_8 {
		padding: 32rpx 0 12rpx;
	}

	.image_12 {
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.16rpx;
		color: #808080;
	}

	.image_13 {
		margin-left: 32rpx;
		width: 26rpx;
		height: 26rpx;

		&.start-img {
			margin-left: 18rpx;
		}
	}

	.equal-division-item_3 {
		padding: 28rpx 0 10rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 18.22rpx;
		color: #808080;
	}

	.image_11 {
		width: 68rpx;
		height: 68rpx;
	}

	.pos_4 {
		position: absolute;
		right: 161rpx;
		top: 0;
	}

	.font_3 {
		font-size: 40rpx;
		font-family: SourceHanSansCN;
		line-height: 39.16rpx;
		color: #333333;
	}

	.text_2 {
		opacity: 0.9;
	}

	.text_12 {
		margin-top: 44rpx;
	}

	.text_11 {
		margin-left: 16rpx;
	}

	.text_10 {
		line-height: 26.4rpx;
	}

	.text_8 {
		margin-top: 68rpx;
	}

	.text_7 {
		margin-left: 16rpx;
	}

	.text_6 {
		line-height: 25.6rpx;
	}

	.text_5 {
		line-height: 25.6rpx;
	}

	.text_3 {
		line-height: 26.1rpx;
	}

	.image_14 {
		width: 90rpx;
		height: 90rpx;
	}

	.pos_13 {
		position: absolute;
		right: 16rpx;
		bottom: 290rpx;
	}

	.section_7 {
		background-color: #ffffff;
		height: 68rpx;
	}

	.pos_14 {
		position: absolute;
		left: 0;
		right: 0;
		top: 1288rpx;
	}


	.carItem {
		display: flex;
		padding: 6px;
		border-radius: 6px;
		background: rgba(255, 255, 255, 1);
		// width: 351px;
		height: 108px;
		// line-height: 108px;
		margin-bottom: 10px;

		.sameImg {
			width: 16px;
			height: 16px;
			margin-right: 5px;
		}

		.timeLeft {
			text-align: center;
			width: 20%;
			color: rgba(76, 142, 239, 1);
			border-right: 1px dashed rgba(229, 241, 255, 1);
			line-height: 96px;
		}

		.middleDestination {
			flex: 1;
			padding: 10px;
			font-size: 14px;

			.destination {
				margin: 10px 0;
				display: flex;
				align-items: center;
			}

			.startLocation {
				display: flex;
				align-items: center;
			}

			.selfInfo {
				display: flex;
				align-items: center;
				color: rgba(128, 128, 128, 1);
				font-size: 12px;

				.name {
					display: flex;
					align-items: center;
					margin-right: 10px;
				}

				.phone {
					display: flex;
					align-items: center;
				}
			}
		}

		.rightPassager {
			color: #4c8eef;
			width: 20%;
			border-left: 1px dashed rgba(229, 241, 255, 1);
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;

			// line-height: 108px;
			.carImg {
				width: 34px;
				height: 34px;
			}
		}
	}
</style>